<template>
	<view class="cardview bgwhite service-item pd" v-if="Object.keys(item).length > 0">
		<!-- 收藏按钮 -->
		<view class="mark-area" @click="handleMark">
			<view>未完成</view>
		</view>
		<view class="mgb10 fl">
			<view class="ser-img mgr">
				<image mode="scaleToFill" :src='item.imgUrl' :alt="item.title" @click="viewImg(item)" style="width: 100%; height: 100%;"/>
			</view>
			<view @click="goDetail">
				<view class="stit">
					<view class="stit mgb5">{{item.title}}</view>
					<view class="desc">106m · 当前12人</view>
					<view class="stext">{{item.subTitle}}</view>
				</view>
			</view>
		</view>
		<view class="" v-if="isShowDesc">
			<view class="tips">{{item.desc}}</view>
		</view>
	</view>
	<view v-else>
		暂无内容
	</view>
</template>

<script setup>
	const props = defineProps({
		isShowDesc:{
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {
				return {
					imgUrl: '',
					title: '',
					isMark: true,
					subTitle: '',
					distance: ''
				}
			}
		}
	});
	const emit = defineEmits(['goDetail', 'handleMark', 'help']);
	const goDetail = (item) => {
		const eid = parseInt(props.loginType) == 1 ? item.eid : item.pid
		emit('goDetail', eid);
	}
	const help = (kdCode) => {
		emit('help', kdCode);
	}
	const handleMark = (kdCode) => {
		emit('handleMark', kdCode);
	}
	const isNull = (val) =>{
		return val === undefined || val === '' || val === null ? '' : val
	}
	const openLocation = (item) => {
		// 调用【跨端】地图API打开定位
		uni.openLocation({
			latitude: Number(item.kdy),
			longitude: Number(item.kdx),
			scale: 18, // 缩放级别，取值范围为5~18  
			name: item.kdName + item.floorName, // 可选，位置名称  
			address: item.kdAddress + '- 考点编号：' + item.kdCode // 可选，位置详细描述  
		});
	}
	// 图预览
	const viewImg = (item) => {
		if (item.floorPic) {
			uni.previewImage({
				current: item.imgUrl, // 当前显示图片的链接
				urls: [item.imgUrl], // 需要预览的图片链接列表
				indicator: 'number',
				loop: true
			});
		} else {
			uni.showToast({
				title: '图暂未上传',
				icon: 'none'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.service-item {
		border: 1px solid rgba(110, 110, 110, 0.1);
		position: relative;
		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.ser-img {
			width: 90px;
			height: 90px;
		}
	}
	.mark-area{
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 5;
		font-size: 12px;
		background-color: #F6A44E;
		padding: 4px 20px;
		color: #FFF;
		border-radius: 0px 15px 0px 15px;
	}
</style>